let tbody = document.getElementsByTagName("tbody")[0], 
    n=0//offset
  
function id(x) {
    return typeof x == "string" ? document.getElementById(x):null
}
//搜索
id("send").addEventListener("click",search)
// 上一页
id("prev").addEventListener("click",()=>n-->0?search():n = 0)
// 下一页
id("next").addEventListener("click",()=>{n++; search()})
//播放
tbody.addEventListener("click",e=>{
    number = e.target.parentElement.getAttribute('data-index')
    getSong()
    id("player").play()
})

/*
1.根据歌名搜索歌曲功能
    - 接口地址: https://music.0melon0.cn/search
    - 请求方式: GET
    - 参数
      - keywords----------歌名(string)
      - offset------------
        偏移量(默认从 0 开始), 跳过第 n 条数据(number)
        > 注释 offset 偏移的量受 limit 影响, 假如 limit 是 10, offset 是 1, 那么下一条数据就是从 11 到 20, offset 是 2, 那么下一条数据就是 21 到 30, 以此类推
      - limit-------------返回最大歌曲数量(number)
*/
function search(){
    song = id("keywords").value
    fetch(`https://music.0melon0.cn/search?keywords=${song}&offset=${n}&limit=10`,{
        method:"GET",
        headers:{
            "Content-Type":"application/x-www-form-urlencoded"
        }
    }).then(res=>{
        return res.json()
    }).then(data=>{
        let songs = data['result']['songs'],
            newTr = ''
        songs.forEach(val=> {
            newTr +=` 
                <tr data-index=${val['id']}><td>${val['name']}</td>
                    <td>${val['artists'][0]['name']}</td>
                    <td>${val['album']['name']}</td>
                    <td>${ moment(val['duration']).format('mm:ss')}</td>
                </tr>`
        })
        tbody.innerHTML=newTr
    }).catch(err=>{
        console.log(err)
    })
}

/*
2. 根据歌曲 id 返回对应歌曲
    - 接口地址: https://music.0melon0.cn/song/url
    - 请求方式: GET
    - 参数: id-----------歌曲 id(number)
*/
function getSong() {
    fetch(`https://music.0melon0.cn/song/url?id=${number}`,{
        method:"GET",
        headers:{
            "Content-Type":"application/x-www-form-urlencoded"
        }
    }).then(res=>{
        return res.json()
    }).then(data=>{
        id("player").src=data['data'][0]['url']
    }).catch(err=>{
        console.log(err)
    })
}